<!-- 
	This is the sign in page, it uses the dashboard layout in: 
	"./layouts/Default.vue" .
 -->

<template>
	<div class="sign-in animate__animated animate__fadeIn">
		
		<a-row type="flex" :gutter="[24,24]" justify="space-around" align="middle">

			<!-- Sign In Form Column -->
			<a-col :span="24" :md="12" :lg="{span: 12, offset: 0}" :xl="{span: 6, offset: 2}" class="col-form" >
				<h1 class="mb-15">登录</h1>
				<h5 class="font-regular text-muted">请使用注册邮箱进行登录</h5>

				<!-- Sign In Form -->
				<a-form
					id="components-form-demo-normal-login"
					:form="form"
					class="login-form"
					@submit="handleSubmit"
					:hideRequiredMark="true"
				>
					<a-form-item class="mb-10" label="Email" :colon="false">
						<a-input 
						v-decorator="[
						'email',
						{ rules: [{ required: true, message: '请输入您的邮箱！' }] },
						]" placeholder="邮箱" />
					</a-form-item>
					<a-form-item class="mb-5" label="Password" :colon="false">
						<a-input
						v-decorator="[
						'password',
						{ rules: [{ required: true, message: '请输入您的密码！' }] },
						]" type="password" placeholder="密码" />
					</a-form-item>
					<a-form-item class="mb-10">
    					<a-switch v-model="rememberMe" /> 记住我的选择
					</a-form-item>
					<a-form-item>
						<a-button type="primary" block html-type="submit" class="login-form-button">
							登录
						</a-button>
					</a-form-item>
				</a-form>
				<!-- / Sign In Form -->

				<p class="font-semibold text-muted">没有账号？ <router-link to="/sign-up" class="font-bold text-dark">请注册</router-link></p>
			</a-col>
			<!-- / Sign In Form Column -->

			<!-- Sign In Image Column -->
			<a-col :span="24" :md="12" :lg="12" :xl="12" class="col-img" >
				<img src="images/login.jpg" alt=""  style="display: block; margin: 0 auto;">

			</a-col>
			<!-- Sign In Image Column -->

		</a-row>
		
	</div>
</template>

<script>

	import swal from "sweetalert";

  export default ({
		data() {
			return {
				// Binded model property for "Sign In Form" switch button for "Remember Me" .
				rememberMe: true,
			}
		},
		beforeCreate() {
			// Creates the form and adds to it component's "form" property.
			this.form = this.$form.createForm(this, { name: 'normal_login' });
		},
		methods: {
			// Handles input validation after submission.
			handleSubmit(e) {
				e.preventDefault();
				this.form.validateFields((err, values) => {
					if ( !err ) {
						// console.log('Received values of form: ', values) ;
            this.login(values.email,values.password);
					}
				});
			},

      login(email,password) {
        this.$axios({
          headers: {
            "Content-Type": "application/json;charset=UTF-8",
          },
          url: "/api/login", //后端请求的路径
          method: "post",
          data: {
            email: email,
            password: password,
          },
        }).then((response) => {
          console.log(response.data)
          if (
              (response.data.token !== "") &&
              (response.data.token !== undefined)
          ) {

            this.$router.push("/info");
            sessionStorage.setItem("systemToken", response.data.token);
            sessionStorage.setItem("auth", response.data.auth[0].authority);
            sessionStorage.setItem("userId",response.data.userId)
          }else if(response.data.status === 10){

            swal("啊哦","您输入的用户名/密码有误，请尝试重新输入","warning")
          }
        });
      },


		},
    mounted() {
      // swal("啊哦","您输入的用户名/密码有误，请尝试重新输入","warning")
    }
  })

</script>

<style lang="scss">
	body {
		background-color: #ffffff;
	}
</style>